<template>
    <div id="details">
        <div class="details-box">
            <div class="details-one">
                <div class="details-one-title">
                    <div class="blocks"></div>
                    <span>资产照片</span>
                </div>
                <div class="details-one-photos">
                    <div class="photos">
                        <!-- 轮播图 -->
                        <el-carousel trigger="click" :autoplay="false" indicator-position="none"
                            arrow="always">
                            <el-carousel-item v-for="item in 4" :key="item">
                                <h3 class="small">{{ item }}</h3>
                            </el-carousel-item>
                        </el-carousel>
                        <div class="erweima">
                            <img src="@/assets/images/erwei.png" alt="" />
                        </div>
                    </div>
                </div>
                <div class="details-one-button">
                    <el-button size="small"
                        style="float: right; margin-top: 8px; background-color: #ffffff">打印二维码</el-button>
                </div>

            </div>

            <div class="details-two">
                <!-- 标题 -->
                <div class="details-two-title">
                    <div class="blocks"></div>
                    <span>流转信息</span>
                </div>
                <!-- 时间线 -->
                <el-timeline>
                    <el-timeline-item :hide-timestamp="true" timestamp="2018/4/12" placement="top" color="#165dff">
                        <div class="card">
                            <div class="information">
                                <span style="margin-left: 15px">2024-09-13 15:18:13</span>
                                <span style="color: #4e5969">单据编号：</span>
                                <span style="color: #165dff">F1051441254142</span>
                            </div>
                            <div class="information-two">
                                <span style="margin-left: 15px">操作方式：</span>
                                <span style="color: black">资产报废</span>
                                <span style="color: #4e5969">操作人：</span>
                                <span style="color: black">王磊</span>
                            </div>
                        </div>
                    </el-timeline-item>
                    <el-timeline-item :hide-timestamp="true" timestamp="2018/4/12" placement="top" color="#165dff">
                        <div class="card">
                            <div class="information">
                                <span style="margin-left: 15px">2024-09-13 15:18:13</span>
                                <span style="color: #4e5969">单据编号：</span>
                                <span style="color: #165dff">F1051441254142</span>
                            </div>
                            <div class="information-two">
                                <span style="margin-left: 15px">操作方式：</span>
                                <span style="color: black">资产报废</span>
                                <span style="color: #4e5969">操作人：</span>
                                <span style="color: black">王磊</span>
                            </div>
                        </div>
                    </el-timeline-item>
                    <el-timeline-item :hide-timestamp="true" timestamp="2018/4/12" placement="top" color="#165dff">
                        <div class="card">
                            <div class="information">
                                <span style="margin-left: 15px">2024-09-13 15:18:13</span>
                                <span style="color: #4e5969">单据编号：</span>
                                <span style="color: #165dff">F1051441254142</span>
                            </div>
                            <div class="information-two">
                                <span style="margin-left: 15px">操作方式：</span>
                                <span style="color: black">资产报废</span>
                                <span style="color: #4e5969">操作人：</span>
                                <span style="color: black">王磊</span>
                            </div>
                        </div>
                    </el-timeline-item>
                </el-timeline>
            </div>
        </div>

        <div class="details-box-two">
            <div class="details-choice">
                <!-- 选择框 -->
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="实物详情" name="first">
                        <div class="details-information">
                            <div class="details-one-title">
                                <div class="blocks"></div>
                                <span>基本信息</span>
                            </div>
                            <div class="details-one-info">
                                <span>所属机构</span>
                                <el-input placeholder="" v-model="input1" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>资产分类</span>
                                <el-input placeholder="" v-model="input2" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>卡片编号</span>
                                <el-input placeholder="" v-model="input3" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>资产编号</span>
                                <el-input placeholder="" v-model="input4" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>资产名称</span>
                                <el-input placeholder="" v-model="input5" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                            </div>
                        </div>

                        <div class="details-information-repeat">
                            <div class="details-one-title">
                                <div class="blocks"></div>
                                <span>实物信息</span>
                            </div>
                            <div class="details-one-info">
                                <span>二维码</span>
                                <el-input placeholder="" v-model="input6" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>创建日期</span>
                                <el-input placeholder="" v-model="input7" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>车牌号</span>
                                <el-input placeholder="" v-model="input8" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>品牌</span>
                                <el-input placeholder="" v-model="input9" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>规格</span>
                                <el-input placeholder="" v-model="input10" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>数量</span>
                                <el-input placeholder="" v-model="input11" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>单位</span>
                                <el-input placeholder="" v-model="input12" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>创建方式</span>
                                <el-input placeholder="" v-model="input13" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>供应商</span>
                                <el-input placeholder="" v-model="input14" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>存放地点</span>
                                <el-input placeholder="" v-model="input15" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>发票保管人</span>
                                <el-input placeholder="" v-model="input16" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>证照保管人</span>
                                <el-input placeholder="" v-model="input17" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>产品线</span>
                                <el-input placeholder="" v-model="input18" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>使用状态</span>
                                <el-input placeholder="" v-model="input19" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>成本中心</span>
                                <el-input placeholder="" v-model="input20" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>使用方式</span>
                                <el-input placeholder="" v-model="input21" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>使用部门</span>
                                <el-input placeholder="" v-model="input22" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>使用人</span>
                                <el-input placeholder="" v-model="input23" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                            </div>
                        </div>

                        <div class="details-information-repeat two">
                            <div class="details-one-title">
                                <div class="blocks"></div>
                                <span>购置信息</span>
                            </div>
                            <div class="details-one-info">
                                <span>供应商</span>
                                <el-input placeholder="" v-model="input24" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>生产厂家</span>
                                <el-input placeholder="" v-model="input25" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>发票号</span>
                                <el-input placeholder="" v-model="input26" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>购买方名称</span>
                                <el-input placeholder="" v-model="input27" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>发票商品名称</span>
                                <el-input placeholder="" v-model="input28" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>开票日期</span>
                                <el-input placeholder="" v-model="input29" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>发票车架号/发票设备编号</span>
                                <el-input placeholder="" v-model="input30" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>发票单价</span>
                                <el-input placeholder="" v-model="input31" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>发票税率</span>
                                <el-input placeholder="" v-model="input32" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>车辆购置税</span>
                                <el-input placeholder="" v-model="input33" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>所有人</span>
                                <el-input placeholder="" v-model="input34" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                            </div>
                        </div>

                        <div class="details-information-repeat three">
                            <div class="details-one-title">
                                <div class="blocks"></div>
                                <span>登记信息</span>
                            </div>
                            <div class="details-one-info">
                                <span>生产管理自编号</span>
                                <el-input placeholder="" v-model="input35" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>注册登记车辆类型</span>
                                <el-input placeholder="" v-model="input36" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>注册登记车辆类型</span>
                                <el-input placeholder="" v-model="input37" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>车架号</span>
                                <el-input placeholder="" v-model="input38" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>发动机号</span>
                                <el-input placeholder="" v-model="input39" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>使用性质</span>
                                <el-input placeholder="" v-model="input40" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>初次注册登记日期</span>
                                <el-input placeholder="" v-model="input41" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>发证日期</span>
                                <el-input placeholder="" v-model="input42" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>核载人数</span>
                                <el-input placeholder="" v-model="input43" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>总质量(KG)</span>
                                <el-input placeholder="" v-model="input44" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>整备质量(KG)</span>
                                <el-input placeholder="" v-model="input45" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>核定载质量(KG)</span>
                                <el-input placeholder="" v-model="input46" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>长(mm)</span>
                                <el-input placeholder="" v-model="input47" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>宽(mm)</span>
                                <el-input placeholder="" v-model="input48" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>高(mm)</span>
                                <el-input placeholder="" v-model="input49" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>动力类型</span>
                                <el-input placeholder="" v-model="input50" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>强制报废时间</span>
                                <el-input placeholder="" v-model="input51" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>核验有效期</span>
                                <el-input placeholder="" v-model="input52" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>排放标准</span>
                                <el-input placeholder="" v-model="input53" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>底盘型号</span>
                                <el-input placeholder="" v-model="input54" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>整车型号</span>
                                <el-input placeholder="" v-model="input55" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>主/副发动机型号</span>
                                <el-input placeholder="" v-model="input56" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>主/副发动机排量</span>
                                <el-input placeholder="" v-model="input57" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                                <span>核验有效期</span>
                                <el-input placeholder="" v-model="input58" :disabled="true" size="mini"
                                    style="width: 200px;">
                                </el-input>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="保险信息" name="second">
                        <div class="insurance">
                            <div class="details-one-title">
                                <div class="blocks"></div>
                                <span>流转信息</span>
                            </div>
                                
                                <el-table :data="tableData" style="width: 98%;font-size: 12px;" height="200" size="mini">
                                    <el-table-column prop="date" label="强制保单编号">
                                    </el-table-column>
                                    <el-table-column prop="name" label="交强险承保单位">
                                    </el-table-column>
                                    <el-table-column prop="address" label="开始日期">
                                    </el-table-column>
                                    <el-table-column prop="address" label="终止时间">
                                    </el-table-column>
                                    <el-table-column prop="address" label="交强险保费">
                                    </el-table-column>
                                </el-table>


                            <div class="details-one-title">
                                <div class="blocks"></div>
                                <span>商业险承保信息</span>
                            </div>

                            <el-table :data="tableData" style="width: 98%;font-size: 12px;" height="200" size="mini">
                                <el-table-column prop="date" label="商业保单编号" width="200">
                                </el-table-column>
                                <el-table-column prop="name" label="商业险承保单位" width="200">
                                </el-table-column>
                                <el-table-column prop="address" label="有效期终止时间" width="200">
                                </el-table-column>
                                <el-table-column prop="address" label="商业险保费合计(元)">
                                </el-table-column>
                                <el-table-column prop="address" label="三者险赔额(万)">
                                </el-table-column>
                                <el-table-column prop="address" label="三者险保费(元)">
                                </el-table-column>
                                <el-table-column prop="address" label="车上人员险司机赔额(万元)">
                                </el-table-column>
                                <el-table-column prop="address" label="司机保费(元)">
                                </el-table-column>
                                <el-table-column prop="address" label="车上人员险乘客赔额(万元)">
                                </el-table-column>
                                <el-table-column prop="address" label="驾乘险投保座位数">
                                </el-table-column>
                            </el-table>
                         
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="维修信息" name="third">

                        <div class="insurance">
                            <div class="details-one-title">
                                <div class="blocks"></div>
                                <span>流转信息</span>
                            </div>
                            <el-table :data="tableData" style="width: 98%;font-size: 12px;" height="200" size="mini">
                                <el-table-column label="维修单号" width="120">
                                    <template slot-scope="scope">
                                        <a @click="handleClick(scope.row)" style="color: blue;" type="text" size="small">{{ scope.row.date }}</a>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="车辆里程(公里)" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="类型" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="送修人" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="维修时间" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="维修项目" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="维修方式" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="维修站点" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="维修金额" width="120">
                                </el-table-column>
                                <el-table-column label="维修前照片">
                                    <template slot-scope="scope">
                                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column label="维修中照片">
                                    <template slot-scope="scope">
                                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column label="维修后照片">
                                    <template slot-scope="scope">
                                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
    
                    </el-tab-pane>
                    <el-tab-pane label="事故信息" name="fourth">
                        <div class="insurance">
                            <div class="details-one-title">
                                <div class="blocks"></div>
                                <span>流转信息</span>
                            </div>
                            <el-table :data="tableData" style="width: 98%;font-size: 12px;" height="220" size="mini">
                                <el-table-column label="事故编号" width="120">
                                    <template slot-scope="scope">
                                        <a @click="handleClick(scope.row)" style="color: blue;" type="text" size="small">{{ scope.row.date }}</a>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="车辆里程(公里)" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="类型" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="报送人" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="故障时间" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="建议维修方式" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="故障照片" width="120">
                                    <template slot-scope="scope">
                                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="address" label="故障原因" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="理赔类型" width="120">
                                </el-table-column>
                                <el-table-column prop="address" label="理赔金额">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: "details",
    components: {},
    metaInfo() {
        return {};
    },
    data() {
        return {
            activeName: 'first',
            input1: 'F1051441254142',
            input2: '固定资产_生产类_机动设备_清洁类',
            input3: 'F0106202405G101050300001',
            input4: 'F0106202405G101050300001',
            input5: '洒水车',
            input6: 'F1051441254142',
            input7: '2024年9月2日',
            input8: '渝A70351',
            input9: '长安汽车',
            input10: '2T',
            input11: '1',
            input12: '辆',
            input13: '购入',
            input14: '新安洁智能环境技术服务股份',
            input15: '后勤仓库',
            input16: '王磊',
            input17: '王磊',
            input18: '-',
            input19: '闲置',
            input20: '总裁部.西南公司,渝东项目公司,忠县项目部',
            input21: '调拨',
            input22: '总裁部.西南公司,渝东项目公司,忠县项目部',
            input23: '王磊',
            input24: '重庆长安福特汽车销售有限公司',
            input25: '长安福特',
            input26: '010528960',
            input27: '重庆新安洁景观园林环保股份有限',
            input28: '长安福特',
            input29: '2024年9月2日',
            input30: '010528960',
            input31: '915000.00',
            input32: '5%',
            input33: '5000.00',
            input34: '新安洁智能环境技术服务股份有限公司',
            input35: '渝A70351',
            input36: '重型载货专项作业车',
            input37: '中联牌ZLJ5250TXSE4',
            input38: 'LGAX4C448F8017171',
            input39: '78209813',
            input40: '非营运',
            input41: '2024年9月2日',
            input42: '2024年9月2日',
            input43: '3',
            input44: '25000.00',
            input45: '25000.00',
            input46: '25000.00',
            input47: '10505.00',
            input48: '2500.00',
            input49: '3355.00',
            input50: '柴油',
            input51: '2024年9月2日',
            input52: '2024年9月2日',
            input53: '国IV',
            input54: '-',
            input55: 'ZLJ5250TXSE4',
            input56: 'IsDe270 40',
            input57: '6700',
            input58: '2024年9月2日',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙'
            }]
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        }
    }
};
</script>
<style lang="scss" scoped>
#details {
    display: flex;
    flex-wrap: nowrap;
    .details-box {
        width: 450px;
        
        .details-one {
            width: 450px;
            .details-one-title {
                width: 100%;
                height: 40px;
                display: grid;
                grid-template-columns: repeat(2, 20px 1fr);
                align-items: center;

                .blocks {
                    background-color: #165dff;
                    height: 14px;
                    width: 4px;
                    border-radius: 0px 3px 3px 0px;
                }

                span {
                    color: #181818;
                    font-size: 14px;
                    font-weight: bold;
                }
            }

            .details-one-photos {
                width: 100%;
                .photos {
                    // height: 340px;
                    width: 430px;
                    float: right;
                    position: relative;
                    .erweima {
                        position: absolute;
                        right: 10px;
                        bottom: 10px;
                        height: 50px;
                        width: 50px;
                        background-color: green;
                        z-index: 999;
                        img{
                            height: 50px;
                            width: 50px;
                        }
                    }
                }
            }

            .details-one-button {
                height: 40px;
                width: 100%;
            }
        }

        .details-two {
            // height: 360px;
            width: 450px;
            position: relative;

            .details-two-title {
                width: 100%;
                height: 24px;
                display: grid;
                grid-template-columns: repeat(2, 20px 1fr);
                margin-bottom: 10px;
                //   align-items: center;
                .blocks {
                    background-color: #165dff;
                    height: 14px;
                    width: 4px;
                    border-radius: 0px 3px 3px 0px;
                }

                span {
                    color: #181818;
                    font-size: 12px;
                    font-weight: bold;
                }
            }

            .card {
                background-color: #f7f8fa;
                border: 1px solid #edeef1;
                height: 60px;

                .information {
                    width: 100%;
                    height: 20px;
                    margin-top: 6px;
                    display: grid;
                    grid-template-columns: repeat(3, 190px 65px 1fr);
                    align-items: center;

                    span {
                        font-size: 13px;
                        font-family: "SimHei", "黑体", Arial, sans-serif;
                    }
                }

                .information-two {
                    width: 100%;
                    height: 20px;
                    margin-top: 6px;
                    display: grid;
                    grid-template-columns: repeat(4, 90px 100px 55px 70px);
                    align-items: center;

                    span {
                        font-size: 13px;
                        font-family: "SimHei", "黑体", Arial, sans-serif;
                    }
                }
            }
        }
    }

    .details-box-two {
        width: 1230px;
        margin-left: 20px;
        flex-grow: 1;
        .details-choice {
            width: 100%;
            height: 40px;

            .details-information {
                width: 100%;

                .details-one-title {
                    width: 100%;
                    height: 40px;
                    display: grid;
                    grid-template-columns: repeat(2, 20px 1fr);
                    align-items: center;

                    .blocks {
                        background-color: #165dff;
                        height: 14px;
                        width: 4px;
                        border-radius: 0px 3px 3px 0px;
                    }

                    span {
                        color: #181818;
                        font-size: 14px;
                        font-weight: bold;
                    }
                }

                .details-one-info {
                    width: 100%;
                    display: grid;
                    grid-template-columns: 130px 240px 130px 240px 130px 240px;
                    grid-template-rows: repeat(2, 50px);
                    color: #66707d;
                    font-size: 12px;
                    align-items: center;

                    span {
                        // justify-self: end;
                        text-align: right;
                        margin-right: 10px;
                    }
                }
            }

            .details-information-repeat {
                width: 100%;

                .details-one-title {
                    width: 100%;
                    height: 40px;
                    display: grid;
                    grid-template-columns: repeat(2, 20px 1fr);
                    align-items: center;

                    .blocks {
                        background-color: #165dff;
                        height: 14px;
                        width: 4px;
                        border-radius: 0px 3px 3px 0px;
                    }

                    span {
                        color: #181818;
                        font-size: 14px;
                        font-weight: bold;
                    }
                }

                .details-one-info {
                    width: 100%;
                    display: grid;
                    grid-template-columns: 130px 240px 130px 240px 130px 240px;
                    grid-template-rows: repeat(6, 50px);
                    color: #66707d;
                    font-size: 12px;
                    align-items: center;

                    span {
                        // justify-self: end;
                        text-align: right;
                        margin-right: 10px;
                    }
                }
            }

            .two {
                width: 100%;

                .details-one-title {
                    width: 100%;
                    height: 40px;
                    display: grid;
                    grid-template-columns: repeat(2, 20px 1fr);
                    align-items: center;

                    .blocks {
                        background-color: #165dff;
                        height: 14px;
                        width: 4px;
                        border-radius: 0px 3px 3px 0px;
                    }

                    span {
                        color: #181818;
                        font-size: 14px;
                        font-weight: bold;
                    }
                }

                .details-one-info {
                    width: 100%;
                    display: grid;
                    grid-template-columns: 130px 240px 130px 240px 130px 240px;
                    grid-template-rows: repeat(4, 50px);
                    color: #66707d;
                    font-size: 12px;
                    align-items: center;
                    text-align: center;

                    span {
                        // justify-self: end;
                        text-align: right;
                        margin-right: 10px;
                    }
                }
            }

            .three {
                width: 100%;

                .details-one-title {
                    width: 100%;
                    height: 40px;
                    display: grid;
                    grid-template-columns: repeat(2, 20px 1fr);
                    align-items: center;

                    .blocks {
                        background-color: #165dff;
                        height: 14px;
                        width: 4px;
                        border-radius: 0px 3px 3px 0px;
                    }

                    span {
                        color: #181818;
                        font-size: 14px;
                        font-weight: bold;
                    }
                }

                .details-one-info {
                    width: 100%;
                    display: grid;
                    grid-template-columns: 130px 240px 130px 240px 130px 240px;
                    grid-template-rows: repeat(8, 50px);
                    color: #66707d;
                    font-size: 12px;
                    align-items: center;
                    text-align: center;

                    span {
                        // justify-self: end;
                        text-align: right;
                        margin-right: 10px;
                    }
                }
            }

            .insurance {
                width: 100%;

                .details-one-title {
                    width: 100%;
                    height: 40px;
                    display: grid;
                    grid-template-columns: repeat(2, 20px 1fr);
                    align-items: center;

                    .blocks {
                        background-color: #165dff;
                        height: 14px;
                        width: 4px;
                        border-radius: 0px 3px 3px 0px;
                    }

                    span {
                        color: #181818;
                        font-size: 14px;
                        font-weight: bold;
                    }
                }
            }
        }


    }

}


.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

</style>
